<template>
  <footer class="w-full h-12 bg-gradient-to-r from-[rgba(255,224,230,0.95)] to-[rgba(255,197,216,0.95)] backdrop-blur-[8px] border-t border-pink-400/20 flex items-center justify-center text-sm text-gray-800 transition-all duration-300 ease-in-out relative z-[100] shrink-0 leading-none">
    <div class="flex items-center justify-center gap-2 px-4 whitespace-nowrap">
      <span class="font-medium text-gray-800 [text-shadow:0_1px_2px_rgba(255,255,255,0.8)] leading-none">© {{ year }} {{ author }}</span>
      <span class="text-[#ff1493] opacity-80 font-medium leading-none">|</span>
      <a href="http://beian.miit.gov.cn/" target="_blank" class="text-gray-800 no-underline transition-all duration-300 ease-in-out relative [text-shadow:0_1px_2px_rgba(255,255,255,0.8)] leading-none hover:text-[#ff1493] after:content-[''] after:absolute after:bottom-[-2px] after:left-0 after:w-0 after:h-[2px] after:bg-gradient-to-r after:from-[#ff69b4] after:to-[#ff1493] after:transition-[width] after:duration-300 after:ease-in-out hover:after:w-full">
        {{ record }}
      </a>
    </div>
  </footer>
</template>

<script setup>
const year = new Date().getFullYear();
const author = '花花';
const record = '赣ICP备18001364号-2';
</script>

<style scoped>
/* Mobile styles */
@media (max-width: 768px) {
  footer {
    font-size: 0.75rem;
  }

  footer > div {
    gap: 0.375rem;
  }
}
</style>
